﻿<!doctype html>
<html>
<head>
<title>bg</title>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
<link href="styles/common.css" rel="stylesheet" />
<style>
.bg { position:fixed; width:100%; height:100%; background:url(images/web.jpg) no-repeat 50% 50%; background-size:cover; }
.dimmer { position:fixed; width:100%; height:100%; background:rgba(0,0,0,0.25); }
.view { display:table; table-layout:fixed; width:400px; height:100%; margin:0 auto; }
.timeline_marker { position:absolute; z-index:9; top:0; bottom:0; left:50%; width:6px; margin-left:-162px; background:rgba(255,255,255,0.25); }
.cont { position:absolute; top:50px; z-index:99; }
    .photo_cont { position:relative; }
        .photo_image { border-radius:6px; background-color:#000; box-shadow:0 2px 6px rgba(0, 0, 0, 0.4);}
        .photo_bor { position:absolute; top:0; left:0; border:1px solid rgba(255, 255, 255, 0.3); border-radius:5px;
                    -moz-box-sizing:border-box;-ms-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;
        }
</head>
</style>
<body>

<div class="bg">
<div class="dimmer">
    <div class="view">
        <div class="timeline_marker"></div>
        <div class="cont">
            <div class="photo_cont">
                <img class="photo_image" width="480" height="358.5" src="images/2x.jpg" alt="" />
                <b class="photo_bor" style="width: 480px; height: 358.5px;"></b>
            </div>


        </div>
    </div><!-- view -->
</div><!-- dimmer -->
</div><!-- bg -->

</body>
</html>

